import React, { PureComponent } from 'react'
import {
  Alert, Button, Modal, Input, message,
} from 'antd'
import { connect } from '@umijs/max'
import { setCopy } from '@/components/CopyText'
import JSEncrypt from '@/utils/JSEncrypt.js'
import styles from './index.less'

@connect(({ apiCall }) => ({ ...apiCall }))
class ApiCall extends PureComponent {
  state = {
    apiToken: '',
    apiExample: '',
    password: null,
  }

  componentDidMount() {
    this.init()
  }

  init = () => {
    this.props.dispatch({
      type: 'apiCall/queryGetDemoUrlDetail',
      params: {},
      cb: (res) => {
        console.log('init', res)
        const { apiExample, apiToken, userToken } = res || {}
        this.setState({
          apiExample, apiToken, userToken,
        })
      },
    })
  }

  render() {
    const {
      apiExample, apiToken, userToken, password,
    } = this.state
    return (
      <div className={styles.api_call}>
        <div className={styles.auth}>
          认证方式一：apiToken身份认证
        </div>
        <Alert message="每个API都有一个apiToken，可在“API管理 - 我的API - API详情”中查看。" type="info" showIcon />
        <div className={styles.apiExample}>
          <span>API调用示例：</span>
          <span>{apiExample}</span>
          <i
            className="iconfont icon-fuzhi"
            onClick={() => { setCopy(apiExample) }}
          />
        </div>
        <div className={styles.apiToken}>
          <span>apiToken：</span>
          <span>{apiToken}</span>
          <i
            className="iconfont icon-fuzhi"
            onClick={() => { setCopy(apiToken) }}
          />
        </div>
        <div className={styles.auth}>
          认证方式二：userToken身份认证
        </div>
        <Alert
          message={
            <div>
              <p>每个用户拥有一个userToken</p>
              <p>注：重置userToken需谨慎，重置需要验证账户密码。重置后老的userToken失效，调用不了API，需要更换新的userToken。</p>
            </div>
          }
          type="info"
          showIcon
        />
        <div className={styles.apiToken}>
          <span>userToken：</span>
          <span>{userToken}</span>
          <i
            className="iconfont icon-fuzhi"
            onClick={() => { setCopy(userToken) }}
          />
          <Button
            style={{ marginLeft: '10px' }}
            type="primary"
            onClick={() => {
              this.setState({
                visible: true,
                password: null,
              })
            }}
          >重置
          </Button>
        </div>
        <Modal
          title="重置userToken"
          visible={this.state.visible}
          onOk={() => {
            this.props.dispatch({
              type: 'apiCall/resetUserToken',
              params: { password: JSEncrypt(password) },
              cb: (res) => {
                if (res.status === 200) {
                  this.setState({
                    visible: false,
                  })
                  this.init()
                  message.success(res.msg || '操作成功')
                } else {
                  message.error(res.msg || '服务端错误')
                }
              },
            })
          }}
          onCancel={() => {
            this.setState({
              visible: false,
            })
          }}
        >
          <Input.Password
            value={password}
            onChange={(e) => {
              this.setState({
                password: e.target.value,
              })
            }}
            autoComplete="new-password"
            placeholder="请输入用户密码"
          />
        </Modal>
      </div>
    )
  }
}

export default ApiCall
